<template>
    <div class="outer" @mouseleave="hiddenList">

            <div class="logo"></div>
            <router-link to="/shouye" active-class="light" class="shouye common" @mouseover="hiddenList">首页</router-link>
            <router-link to="/chanpinzhongxin" active-class="light" class="common" @click.stop="showList">产品中心</router-link>
            <div class="xiala_item" :class="isShow? 'show' : 'hidden'">
                <div class="chanpin" @click.stop="select_item(),select_item_index('产品')">磨床产品</div>
                <div class="peijian" @click.stop="select_item(),select_item_index('配件')">磨床配件</div>
            </div>
            <router-link to="/weixiubaoyang" active-class="light" class="common" @mouseover="hiddenList">维修保养</router-link>
            <router-link to="/gongsijianjie" active-class="light" class="common" @mouseover="hiddenList">公司简介</router-link>
            <router-link to="/xinwenzhongxin" active-class="light" class="common" @mouseover="hiddenList">新闻中心</router-link>
            <router-link to="/lianxiwomen" active-class="light" class="common" @mouseover="hiddenList">联系我们</router-link>
            <div class="serach_icon" @mouseover="hiddenList"></div>
            <div class="weixin" @mouseover="hiddenList">
                <div class="up">24小时热线</div>
                <div class="down">18058427721 (微信同号)</div>
            </div>
    </div>
</template>

<script>
    import {ref} from 'vue'
    import {useStore} from 'vuex'
    export default {
        name: "toubu",
        setup(){
            const store=useStore();
            const isShow=ref(false);
            const showList=()=>{
                isShow.value=true;
            }
            const hiddenList=()=>{
                isShow.value=false;
            }
            const select_item=()=>{
                isShow.value=false;
            }
            const select_item_index=item=>{
                store.state.emitter.emit("change_chanpin_left",item);
                console.log('aaaaaa');
            }
            return {
                showList,
                hiddenList,
                isShow,
                select_item,
                select_item_index,
                store,
            }
        }
    }
</script>

<style scoped>
    .outer{width: 100%;height: 111px;background-color: white;}
    .logo{background-image: url("http://120.78.80.190/logo.png");width: 456px;height: 48px;margin-left: 10px;margin-top: 30px;float: left;}
    .common{float: left;width: 85px;height: 100%;text-align: center;line-height:111px;}
    .shouye{margin-left: 40px;}
    .serach_icon{margin-left: 55px;float: left;width: 34px;height: 32px;margin-top: 39px;background: url("http://120.78.80.190/search.png");background-size: 100% 100%;background-repeat: no-repeat;}
    .weixin{float: left;margin-left: 31px;}
    .up{margin-top: 30px;font-size: 17px;line-height: 17px;color: #033e9a;float: right;clear: both;}
    .down{margin-top: 12px;font-size: 18px;line-height: 18px;color: black;clear: both;position: relative;top:11px;}

    .light{background: #004098 !important;color: white !important;}
    .xiala_item{width: 85px;position: absolute;top: 10px;left: 200px;top: 111px;left: 759px;background-color: white;}
    .xiala_item>div{text-align: center;width: 85px;height: 28px;}
    .xiala_item>div:hover{background-color: #004098;color: white;cursor: pointer;}

    .hidden{display: none;}
    .show{display: block;}
</style>